<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table tr:nth-child(odd){background: red;}   	/*基数行*/
			table tr:nth-child(even){background: #ccc;} 	/*偶数行*/
		</style>
	</head>
	<body>
<!--有些情况下表格很长
	这是将表格分为表头、主体、底部三部分
	在html中，thead：表头
	         tbody：表格主体
	         tfoot：表格底部--> 
	         
        <table>
<!--thead永远显示在表格头部-->        	
        	<thead>
        		<tr>
        			<th>日期</th>
        			<th>收入</th>
        			<th>支出</th>
        		</tr>
        		<tr>
        			<th>日期</th>
        			<th>收入</th>
        			<th>支出</th>
        		</tr>
        	</thead>
 
 <!--tfoot表格底部永远在底部显示，不写在底部也能正常显示-->
        	<tfoot>
        		<tr>
        			<td>合计</td>
        			<td></td>
        			<td>16000</td>
        		</tr>
        	</tfoot>
        	
        	<tbody>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        		<tr>
        			<td>2016.02.25</td>
        		    <td>5000</td>
        		    <td>3000</td>
        		</tr>
        	</tbody>
        	
        	
        </table>
	</body>
</html>
